<template>
  <div class="login">
    <!-- 登录页面 -->
    <!-- 欢迎文字 -->
    <div class="login-header">
      <div>
        欢迎来到洞庭湖教师机旁边的一群小可爱的
        <br />后台管理系统!
      </div>
    </div>
    <!-- 登录框 -->
    <div class="lrf">
      <router-view></router-view>
    </div>

    <!-- 注册忘记密码切换框 -->
    <ul class="login-taggle" @mouseleave="leave">
      <li class="loginCont" @mouseenter="enter(1)" @mouseleave="leave">
        <router-link to="loginCont">{{loginCont}}</router-link>
      </li>
      <li class="register" @mouseenter="enter(2)" @mouseleave="leave">
        <router-link to="register">{{register}}</router-link>
      </li>
      <!-- <li class="forgetPassword" @mouseenter="enter(3)" @mouseleave="leave">
        <router-link to="forgetPassword">{{forgetPassword}}</router-link>
      </li> -->
    </ul>

    <!-- <router-link to="/index">系统管理</router-link> -->
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      loginCont: "",
      register: "", //注册
      forgetPassword: "", //忘记密码
      sTimer: ""
    };
  },
  methods: {
    /* 鼠标移入下面的切换按钮事件 */

    enter(index) {
      clearTimeout(this.sTimer);
      this.sTimer = setTimeout(() => {
        if (index === 1) {
          this.loginCont = "登陆";
        } else if (index === 2) {
          this.register = "注册";
        } else if (index === 3) {
          this.forgetPassword = "忘记密码";
        }
      }, 150);
    },
    leave() {
      clearTimeout(this.sTimer);
      setTimeout(() => {
        this.loginCont = "";
        this.register = "";
        this.forgetPassword = "";
      }, 50);
    }
  }
};
</script>

<style lang="stylus" scoped>
.el-form-item >>> .el-input > input {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
}

.login {
  height: 100%;
}

.login-header {
  background-color: #00bcd4;
  height: 50%;

  div {
    position: fixed;
    top: 19%;
    width: 100%;
    text-align: center;
    font-size: 36px;
    color: #ffffff;
  }
}

.lrf {
  position: relative;
}

.login-taggle {
  display: flex;
  justify-content: space-between;
  width: 100px;
  height: 20px;
  margin: 30px auto;
  font-size: 12px;

  li {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: #f00;
    transition: width 0.3s;
    text-align: center;
  }

  .loginCont {
    background-color: #4caf50;
  }

  .register {
    background-color: #f44336;
  }

  .forgetPassword {
    background-color: #ff9800;
  }

  li:hover {
    width: 70px;
  }
}
</style>
